import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Card } from '@ant-design/react-native';

interface DeviceCardProps {
    image: string | number;
    title: string;
    desc: string;
    onPress?: () => void;
    onLongPress?: () => void; // 新增长按回调
}

export const DeviceCard: React.FC<DeviceCardProps> = ({ image, title, desc, onPress, onLongPress }) => {
    return (
        <View>
            <TouchableOpacity onPress={onPress} onLongPress={onLongPress}>
                <Card style={styles.card}>
                    <View style={styles.imageWrapper}>
                        <Image
                            source={typeof image === 'string' ? { uri: image } : image}
                            style={[styles.image, { resizeMode: 'cover' }]}
                        />
                    </View>
                    <View style={{ paddingTop: 6, paddingLeft: 0 }}>
                        <Text style={styles.DeviceName}>{title}</Text>
                        <Text style={styles.DeviceStatus}>{desc}</Text>
                    </View>
                </Card>
            </TouchableOpacity>
        </View>
        
    );
};

const styles = StyleSheet.create({
    card: {
        width: 160,
        height: 160,
        borderRadius: 20,
        overflow: 'hidden',
        elevation: 2,
        backgroundColor: '#fff',
        alignSelf: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
    },
    imageWrapper: {
        width: 160,
        height: 110,
        overflow: 'hidden',
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
    },
    image: {
        width: '100%',
        height: '100%',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
    },
    DeviceName: {
        fontWeight: 'bold',
        fontSize: 14,
        color: '#333',
        marginTop: 0,
        paddingTop: 0,
        paddingLeft: 15,
    },
    DeviceStatus: {
        fontSize: 12,
        color: '#666',
        marginTop: 0,
        paddingTop: 0,
        paddingLeft: 15,
    },
});

export default DeviceCard;